import * as React from 'react';
import {
    getProvinceById,
    getCityById,
    getDistrictById,
    getStreetById,
    getProvinces,
    getCitiesById,
    getDistrictsById,
    getStreetsById
} from './db.js';
import ReactSelect from 'react-select';
import './region.scss';

function value2object(value) {
    if (!value) {
        value = {};
    }

    if (typeof value === 'number' || typeof value === 'string' && /^\d+$/.test(value)) {
        value =  {
            id: value
        }
    }

    value.id && (value.id = String(value.id));

    return value;
}


export default class RegionPicker extends React.PureComponent {
    componentWillMount() {
        this.handleOptionChange = this.handleOptionChange.bind(this);
        this.handleAddressChange = this.handleAddressChange.bind(this);

        const data = value2object(this.props.value);

        this.state = {
            id: data && data.id,
            provinces: getProvinces(),
            cities: data && getCitiesById(data.id),
            districts: data && getDistrictsById(data.id),
            address: data.address || ''
        };
    }

    componentWillReceiveProps(nextProps) {
        const props = this.props;

        if (props.value !== nextProps.value && (!props.value || !nextProps.value || props.value.id !== nextProps.value.id)) {
            const data = value2object(nextProps.value);

            this.setState({
                id: data.id,
                provinces: getProvinces(),
                cities: data && getCitiesById(data.id),
                districts: data && getDistrictsById(data.id),
                address: data.address || ''
            });
        }
    }


    handleOptionChange(option) {
        const {
            onChange
        } = this.props;

        this.setState({
            id: option.value,
            provinces: getProvinces(),
            cities: option && getCitiesById(option.value),
            districts: option && getDistrictsById(option.value)
        }, () => {
            if (option.value && parseInt(option.value.substring(4), 10)) {
                const id = option.value;

                onChange({
                    id: id,
                    province: getProvinceById(id),
                    city: getCityById(id),
                    district: getDistrictById(id),
                    address: this.state.address
                });
            }
        });
    }

    handleAddressChange(e) {
        const value = e.currentTarget.value;

        this.setState({
            address: value
        }, () => {
            const id = this.state.id;
            if (id && parseInt(id.substring(4), 10)) {
                this.props.onChange({
                    id: id,
                    province: getProvinceById(id),
                    city: getCityById(id),
                    district: getDistrictById(id),
                    address: this.state.address
                })
            }
        })
    }

    render() {
        const {
            provinces,
            cities,
            districts,
            address,
            id
        } = this.state;
        const disabled = this.props.disabled;

        return (
            <div className="region">
                <ReactSelect
                    className="inline region__item"
                    options={provinces}
                    value={id && (id.substring(0, 2) + "0000")}
                    onChange={this.handleOptionChange}
                    placeholder="--省份--"
                    clearable={false}
                    searchable={false}
                    noResultsText="无数据"
                    disabled={disabled}
                />

                <ReactSelect
                    className="inline region__item"
                    options={cities}
                    value={id && (id.substring(0, 4) + "00")}
                    onChange={this.handleOptionChange}
                    placeholder="--城市--"
                    clearable={false}
                    searchable={false}
                    noResultsText="无数据"
                    disabled={disabled}
                />

                <ReactSelect
                    className="inline region__item"
                    options={districts}
                    value={id}
                    onChange={this.handleOptionChange}
                    placeholder="--地区--"
                    clearable={false}
                    searchable={false}
                    noResultsText="无数据"
                    disabled={disabled}
                />

                {this.props.ignoreAddress ? null: (<input disabled={disabled} type="text" value={address} onChange={this.handleAddressChange} placeholder="详细地址" className="form-control" />)}
            </div>
        );
    }
}
